<template>
  <div class="notebook-part-container">
    <template v-if="pageConfig.loading">
      <div class="notebook-spin-container">
        <a-spin tip="Loading..."></a-spin>
      </div>
    </template>

    <template v-else>
      <div class="notebook-content-container">
        <div class="notebook-header-container">
          <a-button class="back-btn" type="primary" ghost shape="round" @click="handleGoBack">回首页</a-button>
          <div class="add-notebook" @click="handleAddNoteBook"><i-mdi-plus-thick style="margin: 0 10px;" />新建文集</div>
        </div>
        <div class="notebook-content-item" v-for="(item, index) in noteBook" :key="item.id"
          :class="active === index ? 'active' : ''" @click="handleNoteBook(item, index)">
          <span>{{ item.name }}</span>
          <template v-if="active === index">
            <a-dropdown :trigger="['hover']" overlayClassName="overlayClassName">
              <a style="color: #ffffff" @click.stop>
                <i-ant-design-setting-filled />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click.stop="handleUpdateNoteBook(item)">
                    <a-row type="flex" justify="center" align="middle">
                      <i-ep-edit style="margin-right: 5px" />修改文集
                    </a-row>
                  </a-menu-item>
                  <a-menu-item @click.stop="handleDeleteNoteBook(item)">
                    <a-row type="flex" justify="center" align="middle">
                      <i-ep-delete style="margin-right: 5px" />删除文集
                    </a-row>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </div>
      </div>
    </template>

  </div>

  <!-- 新建文集 -->
  <a-modal v-model:open="addNoteBookModel" title="新建文集" okText="确定" cancelText="取消" @ok="handleAddOk">
    <a-input v-model:value="notebBookName" placeholder="请输入文集名称..."></a-input>
  </a-modal>

  <!-- 更新文集 -->
  <a-modal v-model:open="updateNoteBookModel" title="更新文集" okText="确定" cancelText="取消" @ok="handleUpdateOk">
    <a-input v-model:value="notebBookName" placeholder="请输入文集名称..."></a-input>
  </a-modal>

  <!-- 删除文集 -->
  <a-modal v-model:open="deleteNoteBookModel" title="删除文集" okText="确定" cancelText="取消" @ok="handleDeleteOk">
    <div style="margin-top: 30px">确认删除文集《{{ notebBookName }}》，文章将被移动到回收站。</div>
  </a-modal>
</template>

<script setup>
import _ from 'lodash-es';

import { noteBookList, addNoteBook, updateNoteBook, deleteNoteBook } from '@/apis/notebook';

const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  },
  active: {
    type: Number,
    default: 0
  }
});

const { $message } = useNuxtApp();

const emit = defineEmits(['check']);
// 选中文集
const handleNoteBook = (item, index) => {
  emit('check', item, index);
}

// 文集列表配置
const noteBook = ref([]);
const pageConfig = reactive({
  loading: false
});

// 初始化文集列表
const initLoadNoteBook = async () => {
  pageConfig.loading = true;
  const { data } = await noteBookList().finally(() => pageConfig.loading = false);

  if (data?.data) {
    noteBook.value = data?.data;
    // 判断如果有数据，则默认选中第一个
    const headNode = _.head(data?.data);
    if (headNode) {
      handleNoteBook(headNode, 0);
    }
  }
}

// 回到首页
const handleGoBack = () => {
  navigateTo('/');
};

// 文集名称
const notebBookName = ref('');
// 新建文集弹框
const addNoteBookModel = ref(false);
// 新建文集
const handleAddNoteBook = () => addNoteBookModel.value = true;
// 确认新建文集
const handleAddOk = async () => {
  const { data } = await addNoteBook({
    body: {
      name: notebBookName.value
    },
  }).finally(() => addNoteBookModel.value = false);

  if (data.success) {
    $message.success(data.msg);
  }
  else {
    $message.error(data.msg);
  }
  initLoadNoteBook();
}

// 更新文集弹框
const updateNoteBookModel = ref(false);
// 更新文集
const handleUpdateNoteBook = item => {
  notebBookName.value = item.name;
  updateNoteBookModel.value = true;
}
// 确认更新文集
const handleUpdateOk = async () => {
  const { data } = await updateNoteBook({
    body: {
      id: props.node.value.id,
      name: notebBookName.value
    },
  }).finally(() => updateNoteBookModel.value = false);

  if (data.success) {
    $message.success(data.msg);
    initLoadNoteBook();
  }
  else {
    $message.error(data.msg);
  }
}

// 删除文集弹框
const deleteNoteBookModel = ref(false);
// 删除文集
const handleDeleteNoteBook = async item => {
  notebBookName.value = item.name;
  deleteNoteBookModel.value = true;
}

// 确认删除文集
const handleDeleteOk = async () => {
  const { data } = await deleteNoteBook({
    body: {
      id: props.node.value.id
    },
  }).finally(() => deleteNoteBookModel.value = false);

  if (data.success) {
    $message.success(data.msg);
    initLoadNoteBook();
  }
  else {
    $message.error(data.msg);
  }
}

onMounted(() => initLoadNoteBook());
</script>

<style lang="less" scoped>
.notebook-part-container {
  width: 100%;
  min-width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #404040;

  .notebook-spin-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .notebook-header-container {
    padding: 0 20px;

    .back-btn {
      width: 100%;
      height: 40px;
      font-size: 16px;
      margin: 10px 0;
    }

    .add-notebook {
      color: #ffffff;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin: 15px 0;
    }
  }

  .notebook-content-container {
    flex: 1;
    max-height: calc(100% - 122px);
    overflow-y: scroll;

    .active {
      background-color: #666666;
      border-left: 3px solid #EC7259 !important;
      padding-left: 17px !important;
    }

    .notebook-content-item {
      height: 15px;
      line-height: 15px;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;

      &:hover {
        background-color: #666666;
      }

      span {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      svg {
        display: block;
      }
    }
  }
}
</style>